<template>
  <div class="im">


    <!-- right container -->
    <div class="right-container">
      <Chat ref="ChatRef" :userInfo="userInfo" @addMember="addBtn" :newGroupId="newGroupId" v-if="isChat" />
      <Organizational v-if="!isChat" @sendPerson="sendPerson" />
    </div>
    
    <!-- 创建群聊 -->
    <el-dialog
      v-model="dialogVisible"
      title="群组成员"
      width="800px"
    >
    
      <el-row>
        <el-col :span="12">
          <el-input maxlength="30" clearable v-model="filterText" placeholder="人员名称" />
          <el-tree
            ref="treeRef"
            :data="treeData"
            :props="defaultProps" 
            :filter-node-method="filterNode"
            show-checkbox
            :check-strictly="true"
            @check="checkUserList"
            node-key="id"
          />
        </el-col>
        <el-col :span="12">
          <p> 已选人员：{{ selectedUserList.length }} </p>

          <el-tag
            v-for="(tag, index) in selectedUserList"
            :key="tag.id"
            closable
            :disable-transitions="false"
            @close="userHandleClose(tag, index)"
          >
            {{ tag.name }}
          </el-tag>
        </el-col>
      </el-row>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmBtn">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>


<script>
import { chatGroupAddApi, chatGroupMemberApi } from './chatjs'
import store from '@/store'

export default {
  name:"left-column",
  data(){
    return{
      isChar: true,
      userInfo:{},
      dialogVisible:fasle,
      treeData:[],
      selectedUserList:[],
      filterText:'',
      treeRef:'',
      ChatRef:'',
      newGroupId:'',
      addMemberGroupId:'',
      defaultProps:{
        children: 'children',
        label: 'name',
        disabled: setDisabled
      }
    }
  },
  created(){
    // 获取人员树
    // getUserTreeApi().then(({ code, data }) => {
    //   if (code === '00000') {
    //     this.treeData.value = data
    //   }
    // })
  },
  methods:{
    filterNode(value, data){
      if(!value){
        return true;
      }
      return data.name.includes(value)
    },
    // 设置部门禁止选择
    setDisabled(data) {
      if (data.nodeType ==='org' || store.state.user.userId === data.id) {
        return true
      }else{
        return false
      } 
    },
    // 人员树选择
    checkUserList (node, data) {
      this.selectedUserList.value = data.checkedNodes
    },
    userHandleClose (tag, index) {
      this.selectedUserList.value.splice(index, 1)
      this.treeRef.value.setChecked(tag.id, false)
    },
    // 发送消息的人
    sendPerson (val) {
      this.isChat.value = true
      this.userInfo.value = val
    },
    // 创建群聊确定
    confirmBtn () {
      if (this.addMemberGroupId.value) {
        if (this.selectedUserList.value.length < 1){
          this.$message.warning('至少添加1个人');
          return 
        }  
        chatGroupMemberApi({
          addOrReduce: 1,
          groupId: this.addMemberGroupId.value,
          groupUserIds: this.selectedUserList.value.map(item => item.id)
        }).then(({ code, data }) => {
          if (code === '00000') {
            this.dialogVisible.value = false
            // ChatRef.value.getMemberList()
            console.log(ChatRef)
            this.$message.success('操作成功');
          }
        })
      } else {
        if (this.selectedUserList.value.length < 2) {
          this.$message.warning('至少添加两个人');
          return ;
        }
        const groupName =  store.state.user.name + ',' + this.selectedUserList.value.map(item => item.name).join(',')
        chatGroupAddApi({
          groupName: this.groupName.slice(0, 20),
          groupUserIds: this.selectedUserList.value.map(item => item.id)
        }).then(({ code, data }) => {
          if (code === '00000') {
            this.dialogVisible.value = false
            this.isChat.value = true
            this.newGroupId.value = data.groupId
          }
        })
      }
    },
    addBtn(val) {
      this.addMemberGroupId.value = val
      this.dialogVisible.value = true
      this.selectedUserList.value = []
      this.$nextTick(() => {
        this.treeRef.value.setCheckedKeys([], true)
      })
    }
  },
  watch:{
    filterText(val){
      treeRef.value.filter(val)
    }
  }
}
</script>

<style lang="scss" scoped>
  div.im {
    display: flex;
    height: 100%;
    padding: 10px 0;

    // 左侧个人信息
    .my-info {
      width: 50px;
      padding: 20px 0;
      background: #428DBE;
      text-align: center;
      img {
        width: 30px;
      }

      .not-avatar {
        margin-top: 15px;
        cursor: pointer;
      }
    }

    .right-container {
      flex: 1;

      /*滚动条样式*/
      ::-webkit-scrollbar {
        width: 6px;
        height: 6px; 
      }
      ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.2);
      }
    }

    
    :deep(.el-row) {
      border: 1px solid #ddd;

      .el-col {
        padding: 20px;
        height: 400px;
        &:first-child {
          border-right: 1px solid #ddd;
          .el-tree {
            height: 320px;
            margin-top: 10px;
            overflow-y: auto;
          }
        }

        &:last-child {
          .el-tag {
            margin: 10px 10px 0 0;
          }
        }
      }
    }
  }
</style>
